<template>
    <div class="coupon_detail">
        <div class="coupon_info">
            <div class="left">
                <div class="left_top">
                    <div><span>{{coupon.rate*100%10?coupon.rate*100:coupon.rate*10}}</span>折</div>
                    <div class="top_info">
                        <div>{{coupon.title}}</div>
                        <div>COUPON</div>
                    </div>
                </div>
                <!-- <div class="left_tips">订单满<span>100</span>减<span>50</span>元</div> -->
            </div>
            <div class="receive">
                <van-button type="primary" color="#3f332a" size="small" @click="login" v-if="!coupon.s&&coupon.total>0">{{btn_text[3]}}</van-button>
                <van-button type="primary" color="#3f332a" size="small" plain @click="login" v-else-if="!coupon.s&&coupon.total<=0">{{btn_text[5]}}</van-button>
                <van-button type="primary" color="#3f332a" size="small" plain @click="buy" v-else-if="coupon.s=='1'">{{btn_text[0]}}</van-button>
                <van-button type="primary" color="#3f332a" size="small" @click="receive(coupon.id,index)" v-else-if="coupon.s=='4'">{{btn_text[3]}}</van-button>
                <van-button type="primary" color="#3f332a" size="small" disabled v-else>{{btn_text[coupon.s-1]}}</van-button>
            </div>
        </div>
        <div class="coupon_prompt">
            <div class="prompt_title">温馨提示：</div>
            <div><span>•</span>每人限领1张</div>
            <div><span>•</span>仅限量{{coupon.total}}张，赶快领取！</div>
            <div><span>•</span>领取后{{coupon.createDate}}至{{coupon.endDate}}有效</div>
        </div>
    </div>

    <Tabbar />
</template>

<script setup>
const {proxy} = getCurrentInstance()
const cid = proxy.$route.query.id
const coupon = ref({})
const btn_text = ref(['去使用','已过期','已使用','领取','已结束','已领完'])
onBeforeMount(async()=>{
    if(!cid)proxy.$router.push('/coupon')
    let result = await proxy.$GET({
        url:'/coupon/info',
        params:{cid:cid}
    })
    coupon.value = result.data
})
</script>

<style scoped>
  @import url('/assets/css/CouponInfo.css');
</style>